{% extends 'basic.html' %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/detail.css') }}">
{% endblock %}

{% block container %}
    <div class="row" style="margin-top: 20px;">
        <div class="col"></div>
        <div class="col-10" style="background-color: #fff;padding: 20px;">
            <h3 class="page-title">{{ question.title }}</h3>
            <p class="question-info">
                <span>作者：{{ question.author.username }}</span><br>
                {% if question.price %}
                <span>价格：{{ question.price }} 元（人民币）</span>
                {% endif %}
            </p>
            <hr>
            <p class="question-content">{{ question.content }}</p>
            <hr>
            {% if question.filename %}
                <a href="/images/{{ question.filename }}">点击查看图片</a>
            {% else %}
                <span>未上传图片</span>
            {% endif %}
            <form action="{{ url_for('qa.confirm',qa_id=question.id) }}">
                <div class="form-group" style="text-align: right;">
                    <button class="btn btn-primary">点击联系发布者</button>
                </div>
            </form>
            <h4 class="comment-group-title">留言（{{ question.answers|length }}）：</h4>
            <form action="{{ url_for('qa.public_ans') }}" method="post">
                <div class="form-group">
                    <input type="text" placeholder="请填写留言" name="content" class="form-control">
                    <input type="hidden" name="question_id" value="{{ question.id }}">
                </div>
                <div class="form-group" style="text-align: right;">
                    <button class="btn btn-primary">发布</button>
                </div>
            </form>
            <ul class="comment-group">
                {% for answers in question.answers %}
                    <li>
                        <div class="user-info">
                            <img class="avatar" src="{{ url_for('static',filename='images/avatar.jpg') }}" alt="">
                            <span class="username">{{ answers.author.username }}</span>
                            <span class="create-time">{{ answers.create_time }}</span>
                        </div>
                        <p class="comment-content">{{ answers.content }}</p>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="col"></div>
    </div>
{% endblock %}
